<template>
	<view v-if="info.goodsType" style="padding-bottom: 100rpx;">
		<view class="top u-flex u-row-between">
			<view class="u-flex" style="align-items: center;">
				<u-icon name="map" size="40"></u-icon>
				<view class="u-margin-left-20" style="width: 500rpx;" v-if="address.id">
					<view>
						<text style="font-size: 32rx;font-weight: bold;">{{address.realname}}</text>
						<text style="color:#999999;margin-left: 20rpx;">{{address.phone}}</text>
					</view>
					<view class="">
						{{address.address}}
					</view>
				</view>
				<view v-else style="font-size: 32rpx;font-weight: bold;margin-left: 20rpx;" hover-class="none">
					<navigator url="../address/addAddress">请先选择收货地址</navigator>
				</view>
			</view>
			<u-icon name="edit-pen" color="#628DFF" size="40" @click="changeAddress" v-if="address.id"></u-icon>
		</view>

		
		<shopList v-if="info.goods.length" :list="info.goods" >
			<template v-slot:btn="{ item }">
				x{{item.num}}
			</template>
		</shopList>	

		<view class="mode">
			<u-cell-group>
				<u-cell-item title="商品运费" :value="info.expressFee+'元'" :arrow="false" :hover-class="false"></u-cell-item>
				<u-cell-item title="商品备注" :arrow="false" :hover-class="false" >
					<view slot="label" style="width:650rpx;"> 
						<u-input v-model="liuyan" :border="border" placeholder="在此处添加您的订单备注" type="textarea"/>
					</view>
				</u-cell-item>
			</u-cell-group>
		</view>


		<view class="mode" >
			<u-cell-group :border="false">
				<u-cell-item title="支付方式" :value="payway" @click="payways" :border-bottom="false" >
					<view slot="rig"></view>
				</u-cell-item>
			</u-cell-group>
			<u-cell-group :border="false" v-if="isCommon">
				<u-cell-item title="优惠券" :value="conpundMoney"  :border-bottom="false" @click="coupondShow=true" >
					<view slot="rig"></view>
				</u-cell-item>
			</u-cell-group>
		</view>




		<view class="bottomFix">
			<view class="u-flex" style="align-items: center;">
				<view class="u-flex u-margin-right-20">
					<view>总计：</view>
					<view style="color:#FF6450;font-size: 56rpx;" >
						<text ></text>
						<text>￥{{payMoney}}</text>
					</view>
				</view>
				<view class="sure" @click="sure">提交订单</view>
			</view>

		</view>

		<u-toast ref="uToast" />
		<paystatus ref="children"  @way="Spayway"></paystatus>
         
		 
		 <u-popup v-model="coupondShow" mode="bottom">
			<view style="padding-bottom: 50rpx;">
				<coupon :list="couponList" @use="useCounpond"></coupon>
			</view>
		 </u-popup>
		 
	</view>
</template>

<script>
	import paystatus from '@/components/payway.vue';
	import payway from '@/common/wxpay.js';
	import shopList from "@/components/shopList.vue";
	import coupon from "@/components/coupon.vue";
	
	
	export default {
		components: {
			paystatus,
			shopList,
			coupon
			
		},
		watch: {
			
			payway: {
				handler(v) {
					console.log(v)
					// this.infor()
					// console.log(v)
				}
			},
			coupondShow(v){
				if(v){
					this.getVouch()
				}
			}
		},
		data() {
			return {
				payMoney:'',
				info:{
					
				},
				liuyan: "",
				address_id:"",
				balance:'',//用户余额
				conpundMoney:0,//优惠券金额
				payway: "余额支付",
				address: {},
				list: [],
				id: '',
				goodsId:"",//规格id
				num:1,//商品数量
				car_id:'',
				isCommon:false , //是否是普通商品
				coupondShow:false,
				couponList:[],  //优惠券
				member_coupon_id:'', //优惠券id
				
			}
		},
		async onLoad(options) {
			console.log(options)
			uni.hideShareMenu()
			if (options.id) {	
				this.id = options.id
			}
			if(options.goodsId){
				this.goodsId = options.goodsId
			}
			
			if(options.num){
				this.num = options.num;
				this.isCommon=true;
			}
			if(options.car_id){
				this.car_id = options.car_id;
				this.isCommon=true;
			}
			
			
			
			
		
			await this.getOrder()
			this.infor()

		},
		onShow() {
			this.getAddress()

		},
		methods: {
			useCounpond(e){
				this.conpundMoney=e.money;
				this.member_coupon_id=e.id;
				this.jisuan()
				this.coupondShow=false
			},
			getVouch(){
				this.$u.post('/user/coupon', {
				      status:2,
					  
				}, {}).then(res => {
				   this.couponList=res.data;
				}).catch(err => {})
			},
			changeAddress() {
				uni.navigateTo({
					url: "../address/index"
				})
			},
			Spayway(e){
				this.payway=e;
				this.jisuan()
			},
			jisuan() {
	            var totalMoney=Number(this.info.payMoney);
				console.log(totalMoney,"totalMoney")
				var conpundMoney=Number(this.conpundMoney);
				var balance=Number(this.balance);
				
				var shijiMoneny =  totalMoney - (this.isCommon? conpundMoney :0) - (this.payway == "余额支付" ? balance : 0);
				 
				this.payMoney = shijiMoneny <= 0 ? 0 : shijiMoneny.toFixed(2);
				
			},
			infor() {
				this.$u.api.userInfo().then(res => {
					this.balance = res.balance; //余额
					this.jisuan()
				}).catch(err => {})
			},
			payways() {
				this.$refs.children.show = true
			},
			// 获取地址信息
			getAddress() {
				this.$u.post('/user/address', {
                      address_id:this.address_id,
					  
				}, {}).then(res => {
				    if(Array.isArray(res)){
						if (res.length) {
							this.address = res[0]
						}
					}else{
						  this.address = res
					}
				}).catch(err => {})
			},
			// 获取订单信息
			getOrder() {
				return new Promise((resolve, reject) => {
					this.$u.post('/indent/affirm', {
						goods_id: this.id,
						goods_item_id:this.goodsId,
						num:this.car_id?'':this.num,
						cart_id:this.car_id
					}, {}).then(res => {
					    this.info=res;	
						resolve(res)
					}).catch(err => {})
				})
			},
			sure() {

				if (!this.address.id) {
					this.$refs.uToast.show({
						title: '请先填写收货地址',
						type: 'error',
					})
				} else {
					this.$u.post('/indent/buy' , {
						address_id: this.address.id,
						goods_id: this.id,
						goods_item_id:this.goodsId,
						num:this.car_id?'':this.num,
						cart_id:this.car_id,
						use_balance: this.payway == "余额支付" ? 1 : 0,
						member_coupon_id:this.member_coupon_id
					}, {}).then(res => {
						console.log(Array.isArray(res) ,777)
						if (! Array.isArray(res) ) {
							var packages = res.package;
							var {
								noncestr,
								timestamp,
								signtype,
								paysign
							} = res
							payway.wx(timestamp, noncestr, packages, signtype, paysign).then(res => {
								
								this.$refs.uToast.show({
									title: '购买成功',
									type: 'success',
									callback :()=>{
									   uni.redirectTo({
										url:'../goodBook/index'
									   })
									}
								})
							   
							}).catch(err => {
								uni.navigateBack({

								})
							})
						} else {
							
							this.$refs.uToast.show({
								title: '购买成功',
								type: 'success',
								callback :()=>{
									uni.redirectTo({
										url:'../goodBook/index'
									})
								}
							})
							
						}



					}).catch(err => {})


				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 200rpx;
	}

	.mode {

		background: #FFFFFF;
		box-shadow: 0px 4rpx 6rpx rgba(209, 209, 209, 0.26);
		border-radius: 20rpx;
		width: 690rpx;
		margin: 40rpx auto;
	}

	.top {
		width: 690rpx;
		background: #FFFFFF;
		box-shadow: 0px 4rpx 6rpx rgba(209, 209, 209, 0.26);
		border-radius: 20rpx;
		margin: 40rpx auto;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
	}

	.list {
		width: 690rpx;
		height: 240rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 6rpx rgba(209, 209, 209, 0.26);
		border-radius: 20rpx;
		margin: auto;
		padding: 20rpx;
		display: flex;
		align-items: center;

		.right {
			margin-left: 20rpx;
			width: 450rpx;

			.size {
				background: #F6F6F6;
				border-radius: 30rpx;
				padding: 7rpx 30rpx;
				text-align: center;
				display: table !important;
				font-size: 24rpx;
				color: #999999;
				margin: 20rpx 0;
			}
		}

		.controls {
			display: flex;
			justify-content: space-between;

			.price {
				color: #FF6450;
				font-size: 36rpx;
			}

			.num {
				color: #628DFF;
				font-size: 36rpx;

			}
		}



	}

	.bottomFix {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		display: flex;
		justify-content: flex-end;
		padding: 20rpx;
		align-items: center;
		box-shadow: 0px -2rpx 6rpx rgba(229, 229, 229, 0.4);
		background: #FFFFFF;
		z-index: 99;
	}

	.sure {
		width: 200rpx;
		height: 80rpx;
		background: #628DFF;
		border-radius: 40rpx;
		text-align: center;
		font-size: 28rpx;
		line-height: 80rpx;
		color: #fff;

	}
</style>
